<template>
<!-- 通用参数维护 -->
  <div>
    <!-- 通用参数维护 -->
    <div class="policy-main circulationInfo" >
      <div class="base-mian-cell-title mt clearfix">
        <div class="left fl">
          <i></i>
          <span class="tips">通用参数维护</span>
        </div>
      </div>

      <!-- 操作按钮 -->
      <el-row style="margin-top: 15px;margin-left: 10px;">
        <el-col :span="24" class="pb15 pt5">
          <el-button
            type="danger"
            size="mini"
            style="margin-left: 10px"
            plain
            @click="add()"
            >新增
          </el-button>
          <el-button
            type="primary"
            size="mini"
            style="margin-left: 10px"
            plain
            @click="search()"
            >高级搜索
          </el-button>
          <el-button
            type="primary"
            size="mini"
            style="margin-left: 10px"
            plain
            @click="sort()"
            >排序
          </el-button>
        </el-col>
      </el-row>


      <!--基本信息列表  -->
      <div class="costbox">
        <el-table :data="dataList" highlight-current-row header-cell-class-name="table-header-class" style="width: 100%">
          <!-- <el-table-column type="index" label="序号" width="80"></el-table-column> -->
          <el-table-column align="center" type="index" width="50" label="序号"></el-table-column>
          <el-table-column
            prop="paramGroupCode"
            header-align="center"
            align="center"
            label="参数组编码"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="paramGroupName"
            header-align="center"
            align="center"
            label="参数组名称"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <el-input
                v-show="scope.row.show"
                placeholder="请输入参数组名称"
                v-model="scope.row.paramGroupName"
              ></el-input>
              <span v-show="!scope.row.show">{{
                scope.row.paramGroupName
              }}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column
            prop="isValid"
            header-align="center"
            align="center"
            label="启动标志"
          >
            <template slot-scope="scope">
              <el-switch
                class="tableScopeSwitch"
                v-show="scope.row.show"
                v-model="scope.row.isValid"
                inactive-color="#c0c0c0"
                :active-value="1"
                :inactive-value="0"
                active-text="是"
                inactive-text="否">
              </el-switch>
              <span v-show="!scope.row.show">{{
                scope.row.isValid === 1 ? '是' : '否'
              }}</span>
            </template>
          </el-table-column> -->
          <el-table-column
            align="center"
            label="操作">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="definition(scope.row)">参数定义</el-button>
              <el-button type="text" size="small" @click="edit(scope.row,'edit')" v-if="!scope.row.show">编辑</el-button>
              <el-button type="text" size="small" @click="edit(scope.row,'save')" v-if="scope.row.show">保存</el-button>
              <el-button type="text" size="small" @click="del(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-row>
          <el-col :span="24">
            <div class="pagination">
              <el-pagination
                  background
                  v-if='paginations.total > 0'
                  :page-sizes="paginations.pageSizes"
                  :page-size="paginations.pageSize"
                  :layout="paginations.layout"
                  :total="paginations.total"
                  :current-page='paginations.pageIndex'
                  @current-change='handleCurrentChange'
                  @size-change='handleSizeChange'>
              </el-pagination>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    
    <!-- 参数新增弹窗 -->
    <el-dialog
      title="新增"
      :visible.sync="dialogVisible"
      v-if="dialogVisible"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      width="30%"
      center
      class="dialog"
      >
      <el-form ref="addForm" :model="addForm" :rules="rules" label-width="110px">
        <el-form-item label="参数组编码：" prop="paramGroupCode">
          <el-input v-model="addForm.paramGroupCode" placeholder="请输入参数组编码"></el-input>
        </el-form-item>
        <el-form-item label="参数组名称：" prop="paramGroupName">
          <el-input v-model="addForm.paramGroupName" placeholder="请输入参数组名称"></el-input>
        </el-form-item>
        <!-- <el-form-item label="启动标志：">
          <el-switch v-model="addForm.isValid" class="tableScopeSwitch reset-switch" inactive-color="#c0c0c0" :active-value="1" :inactive-value="0" active-text="是" inactive-text="否"></el-switch>
        </el-form-item> -->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="reset">取 消</el-button>
        <el-button type="primary" @click="config">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 弹窗, 高级搜索 -->
    <el-dialog
      title="高级搜索"
      :visible.sync="dialogFormVisible"
      :modal-append-to-body="false"
      class="dialog"
    >
      <el-form :model="form">
        <!-- 操作按钮 -->
        <el-row>
          <el-col :span="24" class="pb15 pt5">
            <el-button
              @click="searchAdd(form.tableData)"
              type="danger"
              size="mini"
              style="margin-left: 10px"
              plain
              >新增
            </el-button>
          </el-col>
        </el-row>
        <el-table :data="form.tableData" style="width: 100%">
          <el-table-column prop="field" label="栏位" width="180">
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.field"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in fence"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </template>
          </el-table-column>

          <el-table-column prop="condition" label="条件" width="180">
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.condition"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in conditions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </template>
          </el-table-column>

          <el-table-column prop="searchValue" label="搜索值">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.searchValue"
                placeholder="请输入内容"
              ></el-input>
            </template>
          </el-table-column>

          <el-table-column prop="relation" label="关联">
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.relation"
                placeholder="请选择"
                :disabled="scope.row.relationInputShow"
                clearable
              >
                <el-option label="且" value="and"></el-option>
                <el-option label="或" value="or"></el-option>
              </el-select>
            </template>
          </el-table-column>

          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click="deleteData(scope.row.id, scope.$index)"
                >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button plain @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="danger" @click="savebtn">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 弹窗, 排序 -->
    <el-dialog
      title="排序"
      :visible.sync="sortDialogFormVisible"
      :modal-append-to-body="false"
      class="dialog"
    >
      <el-row>
        <el-col :span="8">
          <ul class="checkListBox">
            <li
              class="option"
              v-for="(item, index) in fields"
              :key="index"
              @click="moveOption(item, index)"
            >
              {{ item.label }}
            </li>
          </ul>
        </el-col>

        <el-col :span="16">
          <el-form :model="form">
            <el-table :data="form.sortTableData" style="width: 100%">
              <el-table-column prop="name" label="排序字段">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.name"
                    placeholder="请输入内容"
                    disabled
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="toOrder" label="排序方式">
                <template slot-scope="scope">
                  <el-select v-model="scope.row.toOrder" placeholder="请选择">
                    <el-option label="正序" value="ASC"></el-option>
                    <el-option label="逆序" value="DESC"></el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    size="small"
                    @click="sortDel(scope.row, scope.$index)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </el-form>
        </el-col>
      </el-row>

      <div slot="footer" class="dialog-footer">
        <el-button plain @click="sortDialogFormVisible = false"
          >取 消
        </el-button>
        <el-button type="danger" @click="sortSavebtn">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {insertOrUpdateGroupApi, getCommonPageListApi, removeGroupApi} from "@/api/setting/maintain/commonParam"; //调接口
export default {
  data() {
    return {
      //需要给分页组件传的信息
      paginations: {
        total: 0,        // 总数
        pageIndex: 1,  // 当前位于哪页
        pageSize: 10,   // 1页显示多少条
        pageSizes: [5, 10, 15, 20],  //每页显示多少条
        layout: "total, sizes, prev, pager, next, jumper",   // 翻页属性
        printTime: '',
      },
      dataList:[],
      dialogVisible: false,
      addForm: {
        paramGroupCode: '',
        paramGroupName: '',
        isValid: 1,
      },
      rules:{
        paramGroupCode: [
          { required: true, message: '请输入参数组编码', trigger: 'blur' },
        ],
        paramGroupName: [
          { required: true, message: '请输入参数组名称', trigger: 'blur' },
        ],
      },
      // 高级搜索和排序
      conditions: [{
        value: 'like',
        label: '类似 like'
      }, {
        value: 'not like',
        label: '非类似 like'
      }, {
        value: '=',
        label: '等于='
      }, {
        value: '<',
        label: '小于<'
      }, {
        value: '>',
        label: '大于>'
      }, {
        value: '<=',
        label: '小于等于<='
      }, {
        value: '>=',
        label: '大于等于>='
      }, {
        value: '<>',
        label: '不等于<>'
      }, {
        value: 'between',
        label: '介于between'
      }, {
        value: 'not between',
        label: '非介于not between'
      }, {
        value: 'in',
        label: '于范围内in'
      }, {
        value: 'not in',
        label: '非于范围内not in'
      }],
      fence: [
      {
        label: "参数组编码",
        value: "paramGroupCode",
      },
      {
        label: "参数值名称",
        value: "paramGroupName",
      },
      /* {
        label: "启动标志",
        value: "isValid",
      } */],

      fields: [{
        label: "参数组编码",
        value: "paramGroupCode",
      },
      {
        label: "参数值名称",
        value: "paramGroupName",
      },
      /* {
        label: "启动标志",
        value: "isValid",
      } */],

      form: {
        // 高级搜索
        tableData: [],
        //排序
        sortTableData: [],
      },
      dialogFormVisible: false, //高级搜索弹框显示隐藏
      sortDialogFormVisible: false, //排序搜索弹框显示隐藏
    }
    
  },
  created(){
    this.searchClick()
  },
  methods: {
    // 每页多少条切换
    handleSizeChange(pageSize) {
      this.paginations.pageIndex = 1;
      this.paginations.pageSize = pageSize;
      this.searchClick()
    },
    // 上下分页
    handleCurrentChange(page) {
      this.paginations.pageIndex = page;
      this.searchClick()
    },

    add(){
      this.addForm = {paramGroupCode: '',paramGroupName: '',isValid: 1,}
      this.dialogVisible = true
    },
    reset(){
      this.dialogVisible = false
    },
    config(){
      this.$refs['addForm'].validate((valid) => {
        if (valid) {
          this.$store.dispatch("loading/CHANGE_LOADING", true);
          insertOrUpdateGroupApi(this.addForm).then((res) => {
            this.$store.dispatch("loading/CHANGE_LOADING", false);
            if (res.resultCode === 0) {
              this.$message.success('保存成功')
              this.searchClick()
              this.reset()
            }
          })
        } else {
          return false;
        }
      });
    },

    definition(row){  //参数定义
      this.$router.push({
				path: "/home/setting/paramDefinition?paramGroupCode=" + row.paramGroupCode+'&paramGroupName='+row.paramGroupName
			});
    },
    edit(ele,ele2){  //编辑
      if(ele2 == 'save'){
        if(!ele.paramGroupName){
          this.$message.warning('参数组名称不能为空')
          return
        }
        insertOrUpdateGroupApi(ele).then((res) => {
          if (res.resultCode === 0) {
            this.$message.success('保存成功')
            this.searchClick()
          }
        })
      }
      this.$set(ele,'show',!ele.show)
    },
    del(row){  //删除
      this.$confirm('是否删除该条数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch("loading/CHANGE_LOADING", true);
         removeGroupApi({id: row.id}).then((res) => {
          this.$store.dispatch("loading/CHANGE_LOADING", false);
          this.searchClick()
          if (res.resultCode === 0) {
            this.$message({
              showClose: true,
              message: '删除成功',
              type: 'success'
            });
          }
        }).catch((err) => {
          this.$store.dispatch("loading/CHANGE_LOADING", false);
        });
      }).catch(() => {
      });
    },
    // 获取列表数据
    searchClick(){
      this.$store.dispatch("loading/CHANGE_LOADING", true);
      let params = {
        pageNum: this.paginations.pageIndex, //当前页
        pageSize: this.paginations.pageSize, //每页数
        orderList: this.form.sortTableData, //排序
        searchConditionList: this.form.tableData, //高级搜索
      }
       getCommonPageListApi(params).then((res) => {
        this.$store.dispatch("loading/CHANGE_LOADING", false);
        if (res.resultCode === 0) {
          let {list,totalCount} = res.data
          this.dataList = list || []
          this.paginations.total = totalCount
        }
      }).catch((err) => {
        this.$store.dispatch("loading/CHANGE_LOADING", false);
      });
    },

    // 高级搜索
    search() {
      this.form.tableData.forEach((item) => {
        if (item.relation == "" || item.relation == undefined) {
          item.relation = "and";
        }
      });
      this.dialogFormVisible = true;
    },

    // 高级搜索-新增
    searchAdd(data) {
      let newsearchObject = {
        field: "", //栏位
        condition: "", //条件
        searchValue: "", //搜索值
        relation: "and", //关联
        relationInputShow: true, //控制关联不可选择
      };
      this.form.tableData.push(newsearchObject);

      // 新增首条数据,关联不可选择
      if (this.form.tableData.length > 1) {
        data.forEach((item, index) => {
          if (index > 0) {
            item.relationInputShow = false;
          }
        });
      }
    },
    //高级搜索-删除
    deleteData(id, index) {
      // console.log(index);
      this.form.tableData.splice(index, 1);
    },
    // 高级搜索-确定
    savebtn() {
      console.log(this.form,'form');
      this.paginations.pageIndex = 1;
      this.searchClick();
      this.dialogFormVisible = false;
    },

    // 排序
    sort() {
      // 显示弹框
      this.sortDialogFormVisible = true;
    },
    //排序删除
    sortDel(row, i) {
      this.form.sortTableData.splice(i, 1);
      let newSortObj = {
        label: row.name,
        value: row.code,
      };
      this.fields.push(newSortObj);
    },

    //排序-滑动框
    moveOption(val, index) {
      this.fields.splice(index, 1);
      let newSortTable = {
        name: val.label,
        code: val.value,
        toOrder: "ASC", //正序倒序
      };
      this.form.sortTableData.push(newSortTable);
    },

    //排序-保存
    sortSavebtn() {
       this.paginations.pageIndex = 1;
      this.searchClick();
      this.sortDialogFormVisible = false;
    },
   
  },
};
</script>

<style lang = "less" scoped>
.policy-main {
  background: #fff;
  .base-mian-cell-title {
    margin: 0px 20px;
    padding: 0 20px;
    height: 48px;
    line-height: 48px;
    border-bottom: 1px solid #e1e1e1;
    overflow: hidden;
    .left {
      .line {
        color: #f76767;
        float: left;
      }
      .tips {
        margin-left: 10px;
        font-weight: bold;
        float: left;
      }
      i{
        width: 2px;
        height: 16px;
        float: left;
        background: red;
        margin-top: 17px;
      }
      .input{
        display: inline-block;
        border:1px solid #e1e1e1;
        line-height: 36px;
        background-color: #fff;
        margin: 0 20px;
        width: 200px;
        padding-left: 15px;
      }
      .el-input {
        /* width: 50%; */
        margin-left: 20px;
        .el-input__inner {
          height: 34px;
          width: 180%;
        }
      }
    }
    .right {
      padding: 0 10px;
      cursor: pointer;
      .el-icon-arrow-down {
        color: #999;
        font-size: 24px;
        line-height: 48px;
      }
      .transform {
        transform: rotate(270deg);
      }
    }
  }

  .base-mian-cell-title:nth-last-of-type(1){
    background-color: #fff;
    border: 1px solid #f4f4f4;
    /* .tips{
      color: #606266;
      font-weight: normal;
    } */
  }
  .mt{
    margin-top: 0px;
  }

}

/deep/.el-table thead tr:nth-of-type(2){
  display: none;
}

.costbox{
    margin: 20px 20px 0 20px;
    padding-bottom: 20px;
    .colsty{
        background-color: #f9f9f9;
        line-height: 40px;
        border: 1px solid #DCDFE6;
        border-radius: 4px;
    }
  }

  /deep/ .col-reset .el-form-item__label{
    width: 85px !important;
    text-align: left !important;
  }
  /deep/ .col-reset .el-form-item__content{
    margin-left: 82px !important;
  }


/deep/ .tableScopeSwitch .el-switch__label {
    position: absolute;
    display: none;
    color: #fff;
}
/*打开时文字位置设置*/
/deep/ .tableScopeSwitch .el-switch__label--right {
    z-index: 1;
    right: 6px;
}
/*关闭时文字位置设置*/
/deep/ .tableScopeSwitch .el-switch__label--left {
    z-index: 1;
    left: 6px;
}
/deep/ .reset-switch .el-switch__label--right {
    z-index: 1;
    right: -10px;
}
/deep/ .reset-switch .el-switch__label--left {
    z-index: 1;
    left: 20px;
}
/*显示文字*/
/deep/ .tableScopeSwitch .el-switch__label.is-active {
    display: block;
}
/deep/ .tableScopeSwitch.el-switch .el-switch__core,
/deep/ .el-switch .el-switch__label {
    width: 50px !important;    /*开关按钮的宽度大小*/
}

/deep/ .dialog .el-dialog{
  min-width: 570px;
}
</style>